<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pear/admin/css/admin.css" />
    <script src="/static/common/jquery-3.6.0.min.js"></script>
</head>
<body  class="pear-container">
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                {notempty name="data"}
                <form class="layui-form" id="from3" lay-filter="from3">
                    <input type="hidden" name="learning_id" value="{$learning_id}">
                    <div id="foo">
                        {volist name="data" id="vo"}
                        <hr>
                        <div>
                            <p style="font-weight: bold;margin: 5px 10px 5px 0px;width: 20%; display: inline ">{$vo.name}</p>
                            <a href="javascript:;" onclick="edit_unit({$vo['id']})" type="button" class="pear-btn pear-btn-xs pear-btn-primary">
                                <i class="layui-icon">&#xe642;</i>
                            </a>
                            <a href="javascript:;" onclick="delete_unit({$vo['id']})" type="button" class="pear-btn pear-btn-xs pear-btn-danger">
                                <i class="layui-icon">&#xe640;</i>
                            </a>
                            <span><input type="hidden" id="step" value="{$vo['id']}"></span>
                            <script>
                                $(function(){
                                    var class_step_{$vo.id} = document.getElementById("class_step_{$vo.id}");
                                    Sortable.create(class_step_{$vo.id}, {
                                        group: "omega{$vo.id}" ,
                                            onEnd:function(){
                                            sort_courseware();
                                        }
                                    });
                                });
                            </script>
                            <table class="layui-table">
                                <colgroup>
                                    <col width="5%">
                                    <col width="30%">
                                    <col width="14%">
                                    <col width="10%">
                                    <col width="6%">
                                    <col width="15%">
                                    <col width="25%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>截止时间</th>
                                    <th>时长(分钟)</th>
                                    <th>类型</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="class_step_{$vo.id}">
                                {notempty name="vo.resource"}
                                {volist name="vo.resource" id="v"}
                                <tr>
                                    <td>
                                        <input name="resource[]" value="{$v.id}" type="hidden" >
                                        {$v.id}
                                    </td>
                                    <td>{$v.title}</td>
                                    <td>{$v.end_time}</td>
                                    <td>{$v.duration}</td>
                                    <td>{$v.type_name|raw}</td>
                                    <td>{$v.add_time}</td>
                                    <td>
                                        <a type="button" onclick="delete_resource({$v['id']},{$v['learning_id']})" class="pear-btn pear-btn-danger pear-btn-xs">
                                            删除
                                        </a>
                                        {if condition="$v.type eq 3"}
                                        <a type="button" href="javascript:;" onclick="show_test_log({$v.id}, {$v.learning_id})" class="pear-btn pear-btn-primary pear-btn-xs">
                                            学习记录
                                        </a>
                                        {elseif condition="$v.type eq 4"/}
                                        <a type="button" href="javascript:;" onclick="show_survey_log({$v.id}, {$v.learning_id})" class="pear-btn pear-btn-primary pear-btn-xs">
                                            学习记录
                                        </a>
                                        {elseif condition="$v.type eq 1 || $v.type eq 2"/}
                                        <a type="button"href="javascript:;" onclick="show_log({$v.id}, {$v.learning_id})" class="pear-btn pear-btn-primary pear-btn-xs">
                                            学习记录
                                        </a>
                                        {/if}
                                    </td>
                                </tr>
                                {/volist}
                                {else/}
                                <tr><td colspan="7" style="text-align: center;">暂无课件</td></tr>
                                {/notempty}
                                </tbody>
                            </table>
                            <div class="layui-btn-container" style="text-align: center;">
                                <a href="javascript:;" type="button" onclick="add_courseware({$learning_id}, {$vo.id})" class="pear-btn pear-btn-sm pear-btn-primary">
                                    <i class="layui-icon">&#xe61f;</i>添加课件
                                </a>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </form>
                {else/}
                <table class="layui-table">
                    <colgroup>
                        <col width="5%">
                        <col width="30%">
                        <col width="14%">
                        <col width="10%">
                        <col width="6%">
                        <col width="15%">
                        <col width="25%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>截止时间</th>
                        <th>时长(分)</th>
                        <th>类型</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr><td colspan="7" style="text-align: center;">暂无数据</td></tr>
                    </tbody>
                </table>
                {/notempty}
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin" style="text-align: center">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;z-index: 1000 !important;">
                    <button class="pear-btn pear-btn-primary pear-btn-md" onclick="add_unit({$learning_id})">添加单元</button>
                    <button class="pear-btn pear-btn-primary pear-btn-md" onclick="show_download({$learning_id})">下载记录</button>
                    <button class="pear-btn pear-btn-primary pear-btn-md" onclick="show_evaluate({$learning_id})">课程评价</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/pear/component/layui/layui.js"></script>
<script src="/static/pear/component/pear/pear.js"></script>
<script src="/static/common/Sortable.js"></script>
<script>
    layui.use(['form', 'common'], function(){
        var $ = layui.$
            ,form = layui.form
            ,common = layui.common;

        form.render();
    });
    //+新增学习单元
    function add_unit(learning_id) {
        layer.prompt({title: '输入单元名称，并确认', formType: 0,}, function(unit, index) {
            let loading = layer.load();
            if(unit == '') {
                return false;
            }

            $.ajax({
                url: '/Learning/saveUnit',
                data: JSON.stringify({learning_id:learning_id,unit:unit}),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function(result) {
                    layer.close(loading);
                    if (result.status == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });
    }

    //+修改学习单元
    function edit_unit(id) {
        layer.prompt({title: '输入单元名称，并确认', formType: 0,}, function(unit, index) {
            let loading = layer.load();
            if(unit == '') {
                return false;
            }
            $.ajax({
                url: '/Learning/modifyUnit',
                data: JSON.stringify({id:id,unit:unit}),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function(result) {
                    layer.close(loading);
                    if (result.status == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });
    }

    //+删除学习单元
    function delete_unit(id) {
        layer.confirm('确定删除该单元?', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: "/Learning/deleteUnit",
                data:{id:id},
                dataType: 'json',
                type: 'post',
                success: function(result) {
                    layer.close(loading);
                    if (result.status == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });
    }

    //+单元排序
    var foo = document.getElementById("foo");
    Sortable.create(foo, {
        group: "omega",
        onEnd:function(){
            var trs = $('body').find('span').find('input[id="step"]');
            var str = '';
            trs.each(function(index){
                var tr = $(this);
                if (tr.is(':disabled') == false) {
                    str += tr.val()+',';
                }
            })
            var sortstr = str.substring(0,str.length-1);

            $.ajax({
                url: "/Learning/sortUnit",
                data:{sortstr:sortstr},
                dataType: 'json',
                type: 'post',
                success: function(result) {
                    layer.close(loading);
                    if (result.status == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })

        }
    });


    //+添加课件
    function add_courseware(learning_id, unit_id) {
        layer.open({
            type: 2,
            title: '添加课件',
            shade: 0.1,
            area: ['900px', '600px'],
            content: '/Learning/courseware?learning_id='+learning_id+'&unit_id='+unit_id
        });
    }

    //+课件排序
    function sort_courseware() {
        var data = $('#from3').serializeArray();

        $.ajax({
            url: "/Learning/sortCourseware",
            data:data,
            dataType: 'json',
            type: 'post',
            success: function(result) {
                layer.close(loading);
                if (result.status == 0) {
                    layer.msg(result.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(result.msg, {
                        icon: 2,
                        time: 1000
                    });
                }
            }
        })
    }

    //+删除学习任务
    function delete_resource(id, learning_id) {
        layer.confirm('确定删除该课件?', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: "/Learning/deleteResource",
                data:{id:id, learning_id:learning_id},
                dataType: 'json',
                type: 'post',
                success: function(result) {
                    layer.close(loading);
                    if (result.status == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });
    }

    //+下载记录
    function show_download(learning_id) {
        layer.open({
            type: 2,
            title: '下载记录',
            shade: 0.1,
            area: ['900px', '600px'],
            content: '/Learning/download?learning_id='+learning_id
        });
    }


    //+课件学习记录
    function show_log(resource_id, learning_id) {
        layer.open({
            type: 2,
            title: '学习记录',
            shade: 0.1,
            area: ['900px', '600px'],
            content: '/Learning/log?resource_id='+resource_id+'&learning_id='+learning_id
        });
    }
    //+测试课件学习记录
    function show_test_log(resource_id, learning_id) {
        parent.layui.admin.addTab('learningtest'+resource_id, "测试课件学习记录", '/Learning/testLog?resource_id='+resource_id+'&learning_id='+learning_id)
    }

    //+survey课件学习记录
    function show_survey_log(resource_id, learning_id) {
        parent.layui.admin.addTab('learningsurvey'+resource_id, "Survey课件学习记录", '/Learning/surveyLog?resource_id='+resource_id+'&learning_id='+learning_id)
    }

    //+课程评价记录
    function show_evaluate(learning_id) {
        parent.layui.admin.addTab('learningevaluate'+learning_id, "课程评价记录", '/Learning/evaluateLog?learning_id='+learning_id)
    }
</script>
</body>
</html>